<template>
  <el-card class="box-card">
    <div style="display: flex;flex-direction: column;justify-content: center;
    align-items: center" @click="link">
      <img :src="data.picUrl" style="width: 50px;height: 50px"/>
      <el-tooltip :content="data.name" placement="bottom" popper-class="testtooltip">
        <div style="text-align: center;margin-top: 5px;height: 32px;font-size: 14px;">{{data.name | ellipsisLength(11)}}</div>
      </el-tooltip>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "card",
  props:{
    data:''
  },
  methods:{
    link(){
      window.open(this.data.appUrl,'blank_')
    }
  }
}
</script>

<style scoped lang="less">
.text {
  font-size: var(--font-size);
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 128px;
  margin-right: 10px;
  margin-top: 10px;
}
</style>
